<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
  <title>主页</title>
</head>
<body>
<%
  Integer teacherId = (Integer) session.getAttribute("teacherId");
  String username = (String) session.getAttribute("username");
%>
<h3 style="text-align: center; margin-top: 20px">欢迎您&nbsp;&nbsp;<%=username%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button class="btn btn-danger" id="logout">退出</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button class="btn btn-success" style="width: 100px" id="per_info">个人信息</button>
</h3>
<div class="container" style="margin-top: 100px">
  <div class="row" style="margin-bottom: 20px">
    <div class="col-md-4">
      <button class="btn btn-primary" style="outline: none;box-shadow: none" id="addStudent">添加</button>&nbsp;&nbsp;
      <button class="btn btn-danger" style="outline: none;box-shadow: none" id="deleteStudent">删除</button>&nbsp;&nbsp;
      <button class="btn btn-success" style="outline: none;box-shadow: none" id="refreshBtn">刷新</button>
    </div>
    <div class="col-md-1 col-md-offset-3">
    </div>
    <div class="col-md-4">
      <div class="input-group">
        <input id="keyWords" name="keyWords" type="text" class="form-control" placeholder="关键词">
        <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" style="outline: none;box-shadow: none" id="searchBtn">搜索</button>
                </span>
      </div>
    </div>
  </div>
  <div>
    <table class="table table-striped" id="student_table">
      <thead>
      <tr style="text-align: center">
        <th>
          <input type="checkbox" id="check_all">
        </th>
        <th scope="col">学号</th>
        <th scope="col">中文名</th>
        <th scope="col">英文名</th>
        <th scope="col">电话号码</th>
        <th scope="col">班级</th>
        <th scope="col">学期</th>
        <th scope="col">期中成绩</th>
        <th scope="col">期末成绩</th>
        <th scope="col">在籍状态</th>
        <th scope="col">操作</th>
      </tr>
      </thead>
      <tbody id="tbody" style="text-align: center"></tbody>
    </table>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="editStudentModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="editStudentForm">
          <div class="form-group">
            <label>学号</label>
            <input readonly="readonly" name="studentId" type="text" class="form-control" id="editStudentId">
          </div>
          <div class="form-group">
            <label>中文名</label>
            <input name="chName" type="text" class="form-control" id="editChName">
          </div>
          <div class="form-group">
            <label>英文名</label>
            <input name="enName" type="text" class="form-control" id="editEnName">
          </div>
          <div class="form-group">
            <label>电话号码</label>
            <input name="tel" type="text" class="form-control" id="editTel">
          </div>
          <div class="form-group">
            <label>班级</label>
            <input name="stuClass" type="text" class="form-control" id="editStuClass">
          </div>
          <div class="form-group">
            <label>学期</label>
            <input name="semester" type="text" class="form-control" id="editSemester">
          </div>
          <div class="form-group">
            <label>期中成绩</label>
            <input name="midMarks" type="text" class="form-control" id="editMidMarks">
          </div>
          <div class="form-group">
            <label>期末成绩</label>
            <input name="endMarks" type="text" class="form-control" id="editEndMarks">
          </div>
          <div class="form-group">
            <label>在籍状态</label>
            <input name="status" type="text" class="form-control" id="editStatus">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="saveEditStudent">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="addStudentModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="addStudentForm">
          <div class="form-group">
            <label>学号</label>
            <input required name="studentId" type="text" class="form-control" id="addStudentId">
          </div>
          <div class="form-group">
            <label>中文名</label>
            <input required name="chName" type="text" class="form-control" id="addChName">
          </div>
          <div class="form-group">
            <label>英文名</label>
            <input required name="enName" type="text" class="form-control" id="addEnName">
          </div>
          <div class="form-group">
            <label>电话号码</label>
            <input required name="tel" type="text" class="form-control" id="addTel">
          </div>
          <div class="form-group">
            <label>班级</label>
            <input required name="stuClass" type="text" class="form-control" id="addStuClass">
          </div>
          <div class="form-group">
            <label>学期（1-8）</label>
            <input required name="semester" type="text" class="form-control" id="addSemester">
          </div>
          <div class="form-group">
            <label>期中成绩</label>
            <input name="midMarks" type="text" class="form-control" id="addMidMarks">
          </div>
          <div class="form-group">
            <label>期末成绩</label>
            <input name="endMarks" type="text" class="form-control" id="addEndMarks">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="addStudentBtn">添加</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" tabindex="-1" role="dialog" id="selectStudentModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form role="form">
          <!-- 单选 -->
          <div class="form-group">
            <select name="selectStu" id="singleSelect" class="form-control">

            </select>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="addStudentInfoBtn">添加</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" id="dispose_select">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" tabindex="-1" role="dialog" id="info_show">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="infoForm">
          <div class="form-group">
            <label>账号</label>
            <input readonly="readonly" name="username" type="text" class="form-control" id="info_name">
          </div>
          <div class="form-group">
            <label>密码</label>
            <input name="password" type="text" class="form-control" id="info_pwd">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="submit_info">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>

<script>

  $(function (){
    getStudentList()
  })

  $("#refreshBtn").click(function (){
    getStudentList()
  })


  // 获取学生列表
  function getStudentList(){

    console.log("teacherId==="+<%=teacherId%>)
    $.ajax({
      url: "${APP_PATH}/getStudentbyTeacher",
      type: "GET",
      data: {"teacherId": <%=teacherId%>},
      success: function (res){
        console.log(res)
        bulidStudentTable(res.data.list)
      }
    })
  }

  function bulidStudentTable(res){
    $("#student_table tbody").empty()
    $("#tbody").empty()
    var info = res
    $.each(res, function (index, item){
      var checkBox = $("<td><input type='checkbox' class='check_item' /></td>")
      var studentIdtd = $("<td></td>").append(item.studentId)
      var chName = $("<td></td>").append(item.chName)
      var enName = $("<td></td>").append(item.enName)
      var tel = $("<td></td>").append(item.tel)
      var stuClass = $("<td></td>").append(item.stuClass)
      var semester = $("<td></td>").append(item.semester)
      var midMarks = $("<td></td>").append(item.midMarks)
      var endMarks = $("<td></td>").append(item.endMarks)
      var status = $("<td></td>").append(item.status)

      var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
              .append($("<span></span>").addClass("bi bi-pencil-square"))
      editBtn.attr("edit_id",item.studentId)
      var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn")
              .append($("<span></span>").addClass("bi bi-trash-fill"))
      delBtn.attr("del_id",item.studentId)
      var btntd = $("<td></td>").append(editBtn).append("  ").append(delBtn)
      $("<tr></tr>").append(checkBox).append(studentIdtd).append(chName).append(enName).append(tel).
      append(stuClass).append(semester).append(midMarks).append(endMarks).append(status).append(btntd).appendTo("#student_table tbody")
    })
  }

  //编辑查看
  $(document).on("click",".edit_btn",function (){
    console.log($(this).attr("edit_id"))
    // diaryId = $(this).attr("edit_id")
    // getDiaryById($(this).attr("edit_id"))
    getStudentById($(this).attr("edit_id"))
    $("#editStudentModal").modal('show')
  })

  // 将表单渲染到编辑模态框
  function getStudentById(studentId){
    $.ajax({
      url: "${APP_PATH}/getStudentById",
      data: {"studentId": studentId},
      method: "GET",
      success: function (res){
        // console.log(res)
        console.log(res)
        $("#editStudentId").val(res.data.data.studentId)
        $("#editChName").val(res.data.data.chName)
        $("#editEnName").val(res.data.data.enName)
        $("#editTel").val(res.data.data.tel)
        $("#editStuClass").val(res.data.data.stuClass)
        $("#editSemester").val(res.data.data.semester)
        $("#editMidMarks").val(res.data.data.midMarks)
        $("#editEndMarks").val(res.data.data.endMarks)
        $("#editStatus").val(res.data.data.status)
      }
    })
  }

  // 保存编辑的信息
  $("#saveEditStudent").click(function (){
    $.ajax({
      url: "${APP_PATH}/saveEditStudentByTeacher",
      data: $(".editStudentForm").serialize()+"&id="+<%=teacherId%>,
      method: "POST",
      success: function (res){
        console.log(res.code)
        if(res.code === 200){
          alert("修改成功")
          $("#editStudentModal").modal('hide')
          getStudentList()
        }
      }
    })
  })

  // 添加学生信息
  <%--$("#addStudent").click(function (){--%>
  <%--  $("#addStudentModal").modal('show')--%>
  <%--})--%>
  <%--$("#addStudentBtn").click(function (){--%>
  <%--  if($("#addStudentId").val().length > 10){--%>
  <%--    alert("学号长度不能超过10位")--%>
  <%--    return--%>
  <%--  }--%>
  <%--  &lt;%&ndash;console.log($(".addStudentForm").serialize()+"&teacherId="+<%=teacherId%>)&ndash;%&gt;--%>
  <%--  $.ajax({--%>
  <%--    url: "${APP_PATH}/addStudentByTeacher",--%>
  <%--    method: "POST",--%>
  <%--    data: $(".addStudentForm").serialize()+"&teacherId="+<%=teacherId%>,--%>
  <%--    success: function (res){--%>
  <%--      var data = JSON.parse(res)--%>
  <%--      console.log(data)--%>
  <%--      if(data.code === 200){--%>
  <%--        alert("添加成功")--%>
  <%--        $("#addStudentModal").modal('hide')--%>
  <%--        getStudentList()--%>
  <%--        $(".addStudentForm input").each(function (){--%>
  <%--          $(this).val("")--%>
  <%--        })--%>
  <%--      }--%>
  <%--    }--%>
  <%--  })--%>
  <%--})--%>

  // 添加已经注册的学生
  $("#addStudent").click(function (){
    $("#selectStudentModal").modal('show')
    var html
    $.ajax({
      url: "${APP_PATH}/getStudentList",
      method: "GET",
      success: function (res){
        //parse解析，将json转换为js对象
        console.log(res)
        $.each(res.data.studentList, function (index, item){
          $("#singleSelect").append($("<option value='"+item.studentId+"'>"+item.studentId+" "+item.chName+ "</option>"))
        })
      }
    })
  })

  $("#addStudentInfoBtn").click(function (){
    console.log($("#singleSelect").val())
    $.ajax({
      url: "${APP_PATH}/isAbleToTeacher",
      data: {"studentId": $("#singleSelect").val(), "teacherId": <%=teacherId%> },
      success: function (res){
        if(res.code === 200){
          alert("该学生已存在")
        }else {
          $.ajax({
            url: "${APP_PATH}/addStuToTeacher",
            data: {"studentId": $("#singleSelect").val(), "teacherId": <%=teacherId%> },
            success: function (res){
              if(res.code === 200){
                alert("添加成功")
                $("#selectStudentModal").modal('hide')
                $("#singleSelect").empty()
                getStudentList()
              }
            }
          })
        }
      }
    })
  })

  $("#dispose_select").on('hide.bs.modal',function (){
    $("#singleSelect").empty()
  })




  // 删除一个
  $(document).on('click', ".del_btn", function (){
    var name = $(this).parents("tr").find("td:eq(2)").text()
    var studentId = $(this).attr("del_id")
    if(confirm("确认删除【"+name+"】吗？")){
      $.ajax({
        url: "${APP_PATH}/removeClass",
        data: {"studentId": studentId},
        method: "POST",
        success: function (res){
          console.log(res)
          if(res.code === 200){
            alert("删除成功")
            getStudentList()
          }
        }
      })
    }
  })

  // 批量删除

  // 全选
  $("#check_all").click(function (){
    $(".check_item").prop("checked", $(this).prop("checked"))
  })

  // 多选
  $(document).on('click', ".check_item", function (){
    //判断当前选中的是否时整个页面数据个数
    var flag = $(".check_item:checked").length == $(".check_item").length
    $("#check_all").prop("checked", flag)
  })

  // 批量删除
  $("#deleteStudent").click(function (){
    var del_ids = ""
    //获取要删除的id
    $.each($(".check_item:checked"), function (){
      del_ids += $(this).parents("tr").find("td:eq(1)").text()+"-"
    })
    del_ids = del_ids.substring(0, del_ids.length-1)
    console.log(del_ids)
    if(confirm("确认删除所选的学生吗？")){
      $.ajax({
        url: "${APP_PATH}/removeMoreClass",
        method: "POST",
        data: {"ids": del_ids},
        success: function (res){
          console.log(res)
          if(res.code === 200){
            alert("删除成功")
            getStudentList()
          }
        }
      })
    }
  })




  $("#logout").click(function (){
    window.location.href = "${APP_PATH}/login.jsp"
  })

  // 个人信息
  $("#per_info").click(function (){
    $("#info_show").modal('show')
    $.ajax({
      url: "${APP_PATH}/getTeacherById",
      data: {"id": <%=teacherId%>},
      method: "POST",
      success: function (res){
        console.log(res)
        $("#info_name").val(res.data.data.username)
        $("#info_pwd").val(res.data.data.password)
      }
    })
  })

  $("#submit_info").click(function (){

    $.ajax({
      url: "${APP_PATH}/editTeacherInfo",
      data: $(".infoForm").serialize()+"&id="+<%=teacherId%>,
      method: "POST",
      success: function (res){
        if(res.code === 200){
          alert("修改成功,下次登录生效")
          $("#info_show").modal('hide')
        }
      }
    })

    <%--$.ajax({--%>
    <%--  url: "${APP_PATH}/getTeacherByName",--%>
    <%--  data: {"name": $("#info_name").val() },--%>
    <%--  method: "POST",--%>
    <%--  success: function (res){--%>
    <%--    if(res.code === 200){--%>
    <%--      alert("该账号已存在")--%>
    <%--    }--%>
    <%--    if(data.code === 202){--%>
    <%--      $.ajax({--%>
    <%--        url: "${APP_PATH}/editTeacherInfo",--%>
    <%--        data: $(".infoForm").serialize()+"&id="+<%=teacherId%>,--%>
    <%--        method: "POST",--%>
    <%--        success: function (res){--%>
    <%--          if(res.code === 200){--%>
    <%--            alert("修改成功,下次登录生效")--%>
    <%--            $("#info_show").modal('hide')--%>
    <%--          }--%>
    <%--        }--%>
    <%--      })--%>
    <%--    }--%>
    <%--  }--%>
    <%--})--%>
  })


</script>


